
import axios from "axios";
import Vue from "vue";
//引入Vuex
import Vuex from 'vuex'

//引入axios

//使用Vuex插件
Vue.use(Vuex)

// 创建state对象
const state = {
  count: 1,
  price: 9,
  movieList: []
}
//创建mutations对象
const mutations = {
  //主要用来写改变状态的函数 所以它的第一个参数就是状态 state
  //然而在mutations中必须写同步函数 异步需要借助actions中转处理 
  increment(state) {
    //现在要修改状态
    state.count++
  },
  incrementN(state, { n, type }) {
    //现在要修改状态
    state.count += n
    alert(type)
  },
  decrement(state) {
    state.count--
  },
  //接受action传来的数据 payload
  setMovieList(state, movieList) {
    state.movieList = movieList;
  },

}
/* 
  Action 类似于 mutation，不同在于：
    Action 提交的是 mutation，而不是直接变更状态。
    Action 可以包含任意异步操作。
*/
const actions = {
  //因为actions中一定会调用commit去调用mutation,所以action中的函数,接受一个对象,对象中提供一个commit方法
  incrementWait({ commit }) {
    setTimeout(() => {
      //我们不要在action中操作数据
      //当异步完成以后,把数据交给mutation去操作数据
      commit("increment")
    }, 3000);
  },
  incrementNWait({ commit }, payload) {
    setTimeout(() => {
      commit("incrementN", payload)
    }, 2000);
  },
  async getMovie({ commit }) {                  
    const re = await axios.get("https://pcw-api.iqiyi.com/search/recommend/list?channel_id=1&data_type=1&mode=11&page_id=2&ret_num=48&session=b9fd987164f6aa47fad266f57dffaa6a")
    commit("setMovieList", re.data.data.list)
  }
}
//创建getters对象
/*  干嘛的 */
//对state状态进行再一步细化 如何 渲染列表时 加上特殊条件 如渲染100条数据并要求偶数条渲染两次
const getters = {
  // 因为要细化state所以第一次函数计算state
  filterMovie(state) {
    return state.movieList.filter((item) => {
      return item.albumName.length >= 4 && item.albumName.length < 5
    })
  },
  diyfilterMovie(state) {
    return ({ start, end }) => {
      return state.movieList.filter((item) => {
        return item.albumName.length >= start && item.albumName.length < end
      })
    }
  }
}





//4.创建一个store(vuex的实例),参数是一个配置对象,在配置对象中可以配置actions,mutations,state,getters等等
//暴露出去供Vue实例的配置项挂载
export default new Vuex.Store({
  state,
  mutations,
  actions,
  getters
})